:root {
    --ui-at-primary: #2a80eb;
    --ui-at-alignment: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.36 11.286a2.001 2.001 0 0 0-3.868-.714h-.493L6.406 7.001l4.593-3.572h.492a2 2 0 1 0-.048-1.286h-.614a.789.789 0 0 0-.482.167L5.14 6.358h-.6A2.001 2.001 0 0 0 .645 7a2.001 2.001 0 0 0 3.895.642h.6l5.207 4.049a.789.789 0 0 0 .482.166h.614a2.004 2.004 0 0 0 1.916 1.428c1.104 0 2-.896 2-2zm-2-9.428a.857.857 0 0 1 0 1.714.857.857 0 0 1 0-1.714zm-10.715 6a.857.857 0 0 1 0-1.715.857.857 0 0 1 0 1.715zm9.857 3.428a.857.857 0 0 1 1.714 0 .857.857 0 0 1-1.714 0z' fill='%23914AFF'/%3E%3C/svg%3E");
 
}

.ui-at-drop-x {
    position: absolute;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 2px 2px 4px #0001;
    width: 10rem;
    line-height: 1.5;
    font-size: .875rem;
    border-radius: .25rem;
    overflow: auto;
}

.ui-at-li {
    display: flex;
    color: inherit;
    text-decoration: none;
    padding: .5rem;
}
.ui-at-li:hover {
    background-color: #f5f5f5;
}

.ui-at-avatar {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    margin-right: .5rem;
}

.ui-at-empty {
    text-align: center;
    color: darkgray;
    padding: .5rem;
}

.ui-at-drop-x ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-at-at {
    display: inline-flex;
    align-items: center;
    background-color: #f5f5f5;
    height: 1.5rem;
    padding: 0 .375rem;
    font-size: .875rem;
    color: var(--ui-at-primary);
    border-radius: 1rem;
    margin: 0 .25rem;
    border: 0;
    cursor: pointer;
}
.ui-at-at[data-name]::before {
    content: '@' attr(data-name);
}
.ui-at-at:hover {
    filter: brightness(.95);
}
.ui-at-at::after {
    content: '';
    width: 1em; height: 1em;
    background-color: var(--ui-at-primary);
    -webkit-mask: var(--ui-at-alignment) no-repeat center / 100%;
    mask: var(--ui-at-alignment) no-repeat center / 100%;
    margin-left: .25rem;
}
.ui-at-at[is-align="false"]::after {
    background-color: darkgray;
}

.ui-at-department {
    color: darkgray;
}

.ui-at-popover {
    position: absolute;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 2px 2px 4px #0001;
    border-radius: .5rem;
    width: 25rem;
    padding: 1rem;
    max-height: 50vh;
    overflow: auto;
    z-index: 199;
}

.ui-at-popover:not([open]) {
    display: none;
}

.ui-at-popover:empty::before {
    display: grid;
    place-items: center;
    height: 10rem;
    content: '加载中...';
}
